@use "sass:color";
@use "sass:map";
@use '../grid/grid-mixins';
@use "variables";

@mixin va-title() {
  font-size: 0.625rem;
  letter-spacing: 0.6px;
  line-height: 1.2;
  font-weight: variables.$font-weight-bold;
  text-transform: uppercase;
}

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin va-header-margin($element) {
  margin-top: map.get(variables.$display-margins, $element);
  margin-bottom: map.get(variables.$display-margins, $element) * 0.5;
}

@mixin va-display($element) {
  color: currentColor;
  font-size: map.get(variables.$display-font-sizes, $element);
  margin: map.get(variables.$display-margins, $element);
  font-weight: 700;
  line-height: map.get(variables.$display-line-height, $element);
}

@mixin va-disabled() {
  cursor: default;
  opacity: 0.4;
  user-select: none;
}

@mixin va-readonly() {
  cursor: default;
  pointer-events: none;
}

@mixin theme-button-variant($color, $background, $border, $shadow) {
  $hover-bg: color.adjust($background, $lightness: 10%);
  $disabled-bg: color.adjust($background, $lightness: -15%);
  $active-bg: color.adjust($background, $lightness: -15%);
  $disabled-color: color.adjust($background, $lightness: -30%);

  background-color: $background;
  color: $color;
  box-shadow: $shadow;
  border: $border;

  &:hover {
    color: $color;
    background-color: $hover-bg;
  }

  &.active,
  &:active,
  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active {
    background-color: $active-bg;
    box-shadow: $shadow;
    color: $color;

    &:focus {
      box-shadow: $shadow;
    }
  }

  &[disabled],
  &[disabled]:hover {
    background-color: $disabled-bg;
    color: $disabled-color;
    opacity: 0.5;
  }
}

@mixin normalize-button {
  font-size: 100%;
  overflow: visible;
  text-transform: none;
  padding: 0;
  background-color: transparent;
  border-style: none;
}

@mixin va-code-snippet {
  font-size: 14px;
  color: variables.$white;
  padding: 1rem;
  font-family: 'Source Code Pro';
  background-color: variables.$vue-darkest-blue;
}

@mixin va-table {
  th,
  td {
    text-align: left;
    padding: 0.625rem;
  }

  th {
    @include resources.va-title();

    color: currentColor;
    border-bottom: 2px solid currentColor;
  }

  td {
    vertical-align: top;
  }

  &--striped {
    tr {
      &:nth-child(even) {
        td {
          background-color: var(--va-background-element);
        }
      }
    }
  }

  &--hoverable {
    tr {
      &:hover {
        td {
          background-color: var(--va-background-element);
        }
      }
    }
  }

  &--clickable {
    td {
      cursor: pointer;
    }
  }
}

@mixin va-scroll($color: var(--va-background-element), $size: 4px) {
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-track {
    box-shadow: none;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: $color;
    opacity: 0.3;
    border-radius: 2px;
  }

  scrollbar-color: $color transparent;
  scrollbar-width: thin;
}

@mixin va-scroll-color($color: var(--va-background-element)) {
  scrollbar-color: $color transparent;

  &::-webkit-scrollbar-thumb {
    background: $color;
  }
}

@mixin va-background($color, $opacity: 1, $index: -1) {
  z-index: 0;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: $color;
    opacity: $opacity;
    z-index: $index;
    transition: all 0.3s ease-in-out;
  }
}

@mixin va-background-opacity($color, $opacity: 1) {
  &::after {
    background: $color;
    opacity: $opacity;
  }
}

@mixin visually-hidden() {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

@mixin focus-outline($radius: 2px, $width: 2px, $offset: null, $style: solid) {
  @if $radius != null {
    border-radius: $radius;
  }

  outline: $width $style var(--va-focus) !important; // important in purpose to overwrite reset class
  outline-offset: $offset;
}

@mixin keyboard-focus-outline($radius: null, $width: 2px, $offset: null, $style: solid) {
  &:focus-visible {
    @include focus-outline($radius, $width, $offset, $style);
  }
}
